<script setup>
import * as echarts from 'echarts';

const state = reactive({
    chart: null
})

onMounted(() => {
    const chartDom = document.getElementById('chart');
    state.chart = echarts.init(chartDom);
    state.chart.setOption(option)
})

onBeforeUnmount(() => {
    if (!state.chart) {
        return
    }
    state.chart.dispose()
    state.chart = null
})

const option = {
    title: {
        text: '月度使用-维修比较'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    series: [
        {
            name: '使用',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '维修',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};
</script>

<template>
    <div style="width: 100vw;height: 80vh;">
        <div id="chart" class="chart" style="width: 80%;height: 100%;" />
    </div>
</template>